<template>
  <div class="map-prop">
    <baidu-map
      :mapClick="false"
      id="MapMain"
      class="map-view"
      :center="fu_msg.center"
      :zoom="fu_msg.zoom"
      :scroll-wheel-zoom="true"
      @ready="handler"
    >
      <bml-marker-clusterer :averageCenter="true">
        <bm-marker
          v-for="item in fu_msg.points.cameraPoints"
          :key="item.deviceId"
          :massClear="true"
          :position="{ lng: item.longitude, lat: item.latitude }"
          :icon="{
            url: iconUrl,
            size: { width: 25, height: 35 },
            opts: { imageSize: { width: 25, height: 35 } }
          }"
          @click="ctrlLiveDialog(item.deviceId)"
        ></bm-marker>
      </bml-marker-clusterer>

      <bml-marker-clusterer
        :averageCenter="true"
        :styles="[
          {
            url: require('../../assets/images/m1.png'),
            size: {
              width: 53,
              height: 53
            }
          }
        ]"
      >
        <!--<bm-marker v-for="marker of markers" :position="{lng: marker.lng, lat: marker.lat}"></bm-marker>-->
        <bm-marker
          v-for="item in fu_msg.points.patrolPoints"
          :key="item.deviceId"
          :massClear="true"
          :position="{ lng: item.longitude, lat: item.latitude }"
          :icon="{
            url: iconUrl1,
            size: { width: 25, height: 35 },
            opts: { imageSize: { width: 25, height: 35 } }
          }"
          @click="ctrlPersonDialog(item.deviceId)"
        ></bm-marker>
      </bml-marker-clusterer>
      <bm-polygon
        :path="fu_msg.polygonPath"
        :stroke-opacity="0.5"
        :stroke-weight="2"
        :editing="false"
        fillColor="#FF0008"
        :fillOpacity="0.35"
        strokeColor="#FF0008"
        @click="polygonZoom"
      />
    </baidu-map>
  </div>
</template>

<script>
import BmMarker from "vue-baidu-map/components/overlays/Marker";
import BmlMarkerClusterer from "vue-baidu-map/components/extra/MarkerClusterer";
export default {
  name: "MonitorMap",
  props: {
    fu_msg: {
      polygonPath: [],
      center: {},
      zoom: 5,
      position: {},
      points: {
        cameraPoints: [],
        patrolPoints: []
      }
    }
  },
  data() {
    return {
      iconUrl: require("../../assets/images/shexiangtou.png"),
      iconUrl1: require("../../assets/images/anquanmao.png"),
      zi_msg: {
        deviceId: ""
      }
    };
  },
  components: {
    BmlMarkerClusterer,
    BmMarker
  },
  methods: {
    //百度地图
    handler({ BMap, map }) {
      this.bmap = BMap;
      this.map = map;
      setTimeout(() => {
        // window.console.log("BMap :==>" + BMap, map);
        // alert("dsfafdsf")
        // this.center.lng = 116.404;
        // this.center.lat = 39.915;
        // this.zoom = 12;
        //114.405741,30.511878
      }, 0);
      // setTimeout(function() {
      //   map = new BMap.Map("MapMain", {
      //     enableMapClick: false,
      //   }); // 创建Map实例
      // }, 1000 * 0.5)
    },
    polygonZoom() {},
    ctrlLiveDialog(e) {
      this.zi_msg.deviceId = e;
      this.zi_msg.vis_VideoDialog = true;
      // this.zi_msg.vis_VideoDialog = !this.zi_msg.vis_VideoDialog;
      this.$emit("func_marker_video", this.zi_msg);
    },

    ctrlPersonDialog(e) {
      this.zi_msg.deviceId = e;
      this.zi_msg.vis_PersonDialog = true;
      // this.zi_msg.vis_VideoDialog = !this.zi_msg.vis_VideoDialog;

	// 可以出发当前实例中的属性，对应方法；从而实现了，子组件向父组件通信
      this.$emit("func_marker_person", this.zi_msg);
    }
  }
};
</script>

<style scoped>
.map-prop {
  width: -webkit-calc(100% + 20px);
  width: -moz-calc(100% + 20px);
  width: calc(100% + 20px);
}
.map-view {
  width: 100%;
  height: 544px;
  left: 0px;
  top: 2px;
  position: relative;
}
</style>
